<template>
	<div>
		<el-row style="height:100px">
			<el-col :span="8">
				<div class="grid-content bg-purple"></div>
			</el-col>
			<el-col :span="8">
				<div class="grid-content bg-purple-light">
					<div @click="oneC()" style="float:left;cursor: pointer">耗电量月统计 |</div>
					<div @click="twoC()" style="float:left;cursor: pointer">耗电分类统计 |</div>
					<div @click="threeC()" style="cursor: pointer">水流量月分类统计</div>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="grid-content bg-purple"></div>
			</el-col>
		</el-row>
		   <div class="row">
		   	  <div class="row-item">
		   	  	  <span>月</span>
		   	  	  <span style="width:1px;height: 100%;background:#63b0ff"></span>
		   	  	  <span>年</span>
		   	  </div>
		   </div>
		<el-row>
			<el-col :span="24">
				<div id="myChart" style="width:100%" :style="{ height: '600px'}"></div>
			</el-col>
		</el-row>
	</div>
</template>
<style>
	.row{
		display: flex;
	
	}
	.row-item{
		margin-left: auto;
		display: flex;
	}
</style>
<script>
	export default {
		data() {
			return {

			};
		},
		mounted() {
			this.getData();
		},
		methods: {
			oneC() {
				debugger;
				this.$router.push({
					path: "/echarts"
				});
			},
			twoC() {
				this.$router.push({
					path: "/echartsOne"
				});
			},
			threeC() {
				debugger;
				this.$router.push({
					path: "/echartsTwo"
				});
			},
			getData() {
				//耗电量月统计
				this.$httpRequest.get("api/Device/GetReport", "", res => {
					// 基于准备好的dom，初始化echarts实例
					let myChart = this.$echarts.init(document.getElementById("myChart"));
					// 绘制图表
					myChart.setOption({
						title: {
							text: "耗电量月统计"
						},
						legend: {
							data: res.data.legend
						},
						tooltip: {
							trigger: "axis"
						},
						xAxis: {
							type: "category",
							boundaryGap: false,
							data: res.data.xdata
						},
						series: res.data.series,
						yAxis: {
							type: "value"
						}
					});

				});
			}
		}
	};
</script>